<template>
  <!-- 
    1、form表单 rules验证  个人信息填写 需要验证 才能下一步
    2、upload 判断上传的图片是否为空 进行下一步
    3、获取 1 2 步的内容 进行提交
 -->
  <div>
    <el-container>
      <el-header style="height: 300px">
        <el-steps direction="vertical" :active="active">
          <el-step title="步骤 1"></el-step>
          <el-step title="步骤 2"></el-step>
          <el-step
            title="步骤 3"
            description="这是一段很长很长很长的描述性文字"
          ></el-step>
        </el-steps>
      </el-header>
      <el-main>
        <el-form
          v-if="active == '1'"
          :model="ruleForm"
          status-icon
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <div>
            <h1>个人信息</h1>
            <el-form-item label="姓名" prop="username">
              <el-input
                v-model="ruleForm.username"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item label="年龄" prop="age">
              <el-input v-model.number="ruleForm.age"></el-input>
            </el-form-item>
          </div>
        </el-form>
        <el-upload
          v-if="active == 2"
          action="https://jsonplaceholder.typicode.com/posts/"
          list-type="picture-card"
          :file-list="fileList"
        >
          <i class="el-icon-plus"></i>
        </el-upload>
        <el-card class="box-card" v-if="active == 3">
          <div slot="header" class="clearfix">
            <span>注册</span>
          </div>
          <div>个人信息 图片</div>
        </el-card>
      </el-main>
      <el-footer>
        <el-button v-if="show" @click="next">下一步</el-button>
        <el-button v-else @click="onSubmit">提交</el-button>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
export default {
  name: 'orders',
  data() {
    return {
      active: 1,
      arr: ['', 'user', 'upload', 'content'],
      show: true,
      ruleForm: {
        username: '',
        age: ''
      },
      rules: {
        username: [{ required: true, message: '姓名不能为空' }],
        age: [{ required: true, message: '年龄不能为空' }]
      },
      dialogImageUrl: '',
      dialogVisible: false,
      fileList: [{ src: '222' }]
    }
  },
  methods: {
    next() {
      switch (this.active) {
        case 1:
          this.$refs['ruleForm'].validate((valid) => {
            valid == true ? this.active++ : (this.active = 1)
          })
          break
        case 2:
          this.fileList.length > 0 ? this.active++ : (this.active = 2)
          break
        default:
          this.active = 1
      }
    },
    onSubmit() {
      console.log(this.ruleForm, this.fileList)
      axios.post('url', data).then((res) => {
        console.log(res)
      })
    }
  },
  watch: {
    active: {
      immediate: true,
      handler(val) {
        if (val === 3) {
          this.show = false
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.step >>> .el-step__icon {
  display: flex !important;
}
</style>
